<template>
	<view class="team-page">
		<!-- 标签页 -->
		<view class="tabs">
			<view class="tab-item" :class="{active: activeTab === 0}" @click="switchTab(0)">
				<text class="tab-text">团队收益</text>
			</view>
			<view class="tab-item" :class="{active: activeTab === 1}" @click="switchTab(1)">
				<text class="tab-text">云主办公</text>
			</view>
			<view class="tab-item" :class="{active: activeTab === 2}" @click="switchTab(2)">
				<text class="tab-text">市运营办公</text>
			</view>
		</view>

		<!-- 团队收益页面 -->
		<template v-if="activeTab===0">
			<!-- 用户信息区域 -->
			<view class="user-info">
				<view class="user-avatar">
					<image :src="`${serverAddress}img/image/icon-tjr.png`" class="avatar-img"></image>
				</view>
				<view class="center-avatar">
					<view class="main-avatar">
						<image :src="`${serverAddress+teamRevenueData.user_img}`" class="main-avatar-img"></image>
					</view>
					<text class="user-id">{{teamRevenueData.user_nickname}}</text>
				</view>
				<view class="team-avatar">
					<image :src="`${serverAddress}img/image/icon-wtjd.png`" class="team-img"></image>
					<text class="team-text">我推荐的</text>
				</view>
			</view>

			<!-- 会员卡片 -->
			<view class="card-item member-card" @click="goToTuandui(1)">
				<view class="card-left">
					<view class="icon-wrapper member-icon">
						<!-- <text class="icon">👑</text> -->
						<image class="icon" :src="`${serverAddress}img/icon-hy.png`" />
					</view>
					<text class="card-title">会员</text>
				</view>
				<view class="card-right">
					<text class="arrow">›</text>
				</view>
				<view class="card-stats">
					<view class="stat-item">
						<text class="stat-number">{{teamRevenueData.user_count}}人</text>
						<text class="stat-label">总人数</text>
					</view>
					<view class="divider"></view>
					<view class="stat-item">
						<text class="stat-number">¥{{teamRevenueData.recom_rebate_profit}}</text>
						<text class="stat-label">消费分润</text>
					</view>
				</view>
			</view>

			<!-- 合伙人卡片 -->
			<view class="card-item partner-card" @click="goToTuandui(2)">
				<view class="card-left">
					<view class="icon-wrapper partner-icon">
						<!-- <text class="icon">👥</text> -->
						<image class="icon" :src="`${serverAddress}img/Partn3x.png`" />
					</view>
					<text class="card-title">合伙人</text>
				</view>
				<view class="card-right">
					<text class="arrow">›</text>
				</view>
				<view class="card-stats">
					<view class="stat-item">
						<text class="stat-number">{{teamRevenueData.partner_count}}人</text>
						<text class="stat-label">总人数</text>
					</view>
					<view class="divider"></view>
					<view class="stat-item">
						<text class="stat-number">¥{{teamRevenueData.recom_partner_profit}}</text>
						<text class="stat-label">邀请奖励</text>
					</view>
				</view>
			</view>

			<!-- 合伙人(间接邀请)卡片 -->
			<view class="card-item indirect-card" @click="goToTuandui(5)">
				<view class="card-left">
					<view class="icon-wrapper indirect-icon">
						<!-- <text class="icon">👍</text> -->
						<image class="icon" :src="`${serverAddress}img/icon-jjtj.png`" />
					</view>
					<text class="card-title">合伙人(间接邀请)</text>
				</view>
				<view class="card-right">
					<text class="arrow">›</text>
				</view>
				<view class="card-stats">
					<view class="stat-item">
						<text class="stat-number">{{teamRevenueData.indirect_partner_count}}人</text>
						<text class="stat-label">总人数</text>
					</view>
					<view class="divider"></view>
					<view class="stat-item">
						<text class="stat-number">¥{{teamRevenueData.indirect_partner_profit}}</text>
						<text class="stat-label">邀请奖励</text>
					</view>
				</view>
			</view>

			<!-- 市运营3卡片 -->
			<view class="card-item operation-card" @click="goToTuandui(3)">
				<view class="card-left">
					<view class="icon-wrapper operation-icon">
						<!-- <text class="icon">🏢</text> -->
						<image class="icon" :src="`${serverAddress}img/agentss1.png`" />
					</view>
					<text class="card-title">市运营 3</text>
				</view>
				<view class="card-right">
					<text class="arrow">›</text>
				</view>
				<view class="card-stats">
					<view class="stat-item">
						<text class="stat-number">{{teamRevenueData.agent_count}}人</text>
						<text class="stat-label">总人数</text>
					</view>
					<view class="divider"></view>
					<view class="stat-item">
						<text class="stat-number">¥{{teamRevenueData.recom_agent_profit}}</text>
						<text class="stat-label">邀请奖励</text>
					</view>
				</view>
			</view>
			<!-- 商家4卡片 -->
			<view class="card-item operation-card" @click="goToTuandui(4)">
				<view class="card-left">
					<view class="icon-wrapper operation-icon">
						<!-- <text class="icon">🏢</text> -->
						<image class="icon" :src="`${serverAddress}img/businessman.png`" />
					</view>
					<text class="card-title">商家 4</text>
				</view>
				<view class="card-right">
					<text class="arrow">›</text>
				</view>
				<view class="card-stats">
					<view class="stat-item">
						<text class="stat-number">{{teamRevenueData.merch_count}}人</text>
						<text class="stat-label">总人数</text>
					</view>
					<view class="divider"></view>
					<view class="stat-item">
						<text class="stat-number">¥{{teamRevenueData.recom_merch_profit}}</text>
						<text class="stat-label">邀请奖励</text>
					</view>
				</view>
			</view>
			<!-- 厂家6卡片 -->
			<view class="card-item operation-card" @click="goToTuandui(6)">
				<view class="card-left">
					<view class="icon-wrapper operation-icon">
						<!-- <text class="icon">🏢</text> -->
						<image class="icon" :src="`${serverAddress}img/icon-jjtj.png`" />
					</view>
					<text class="card-title">厂家 6</text>
				</view>
				<view class="card-right">
					<text class="arrow">›</text>
				</view>
				<view class="card-stats">
					<view class="stat-item">
						<text class="stat-number">{{teamRevenueData.manufac_count}}人</text>
						<text class="stat-label">总人数</text>
					</view>
					<view class="divider"></view>
					<view class="stat-item">
						<text class="stat-number">¥{{teamRevenueData.recom_manufac_profit}}</text>
						<text class="stat-label">邀请奖励</text>
					</view>
				</view>
			</view>
			<!-- 云主7卡片 -->
			<view class="card-item operation-card" @click="goToTuandui(7)">
				<view class="card-left">
					<view class="icon-wrapper operation-icon">
						<!-- <text class="icon">🏢</text> -->
						<image class="icon" :src="`${serverAddress}img/cloudWork.png`" />
					</view>
					<text class="card-title">云主 7</text>
				</view>
				<view class="card-right">
					<text class="arrow">›</text>
				</view>
				<view class="card-stats">
					<view class="stat-item">
						<text class="stat-number">{{teamRevenueData.staff_count}}人</text>
						<text class="stat-label">总人数</text>
					</view>
					<view class="divider"></view>
					<view class="stat-item">
						<text class="stat-number">¥{{teamRevenueData.recom_staff_profit}}</text>
						<text class="stat-label">邀请奖励</text>
					</view>
				</view>
			</view>
		</template>

		<!-- 市运营办公页面 -->
		<template v-if="activeTab===2">
			<!-- 邀请好友横幅 -->
			<view class="invite-banner">
				<view class="banner-content">
					<view class="banner-text">
						<text class="main-text">邀请好友</text>
						<text class="sub-text">一起来赚收益</text>
					</view>
					<view class="invite-btn">
						<text class="btn-text">邀请好友 得收益</text>
					</view>
				</view>
				<view class="banner-icon">💰</view>
			</view>

			<!-- 功能图标区域 -->
			<view class="function-icons">
				<view class="icon-item" @click="goToTaskHistory">
					<view class="icon-wrapper">
						<!-- <text class="icon">📋</text> -->
						<image class="icon" :src="`${serverAddress}img/image/Task history@2x.png`" />
					</view>
					<text class="icon-label">任务历史</text>
				</view>
				<view class="icon-item" @click="goToGrowthPlan">
					<view class="icon-wrapper">
						<!-- <text class="icon">📈</text> -->
						<image class="icon" :src="`${serverAddress}img/image/Growth plan@2x.png`" />
					</view>
					<text class="icon-label">成长计划</text>
				</view>
				<view class="icon-item" @click="goToMerchantManage">
					<view class="icon-wrapper">
						<!-- <text class="icon">🏪</text> -->
						<image class="icon" :src="`${serverAddress}img/image/Investment management@2x.png`" />
					</view>
					<text class="icon-label">招商管理</text>
				</view>
				<view class="icon-item" @click="goToMonthlyStats">
					<view class="icon-wrapper">
						<!-- <text class="icon">📊</text> -->
						<image class="icon" :src="`${serverAddress}img/image/Monthly statistics@2x.png`" />
					</view>
					<text class="icon-label">月度统计</text>
				</view>
			</view>

			<!-- 办公模式区域 -->
			<view class="office-mode">
				<view class="mode-header">
					<text class="mode-title">办公模式</text>
					<view class="mode-switch">
						<text class="switch-label">自动审批</text>
						<view class="switch-btn" :class="{active: autoApproval}" @click="toggleAutoApproval">
							<view class="switch-dot"></view>
						</view>
					</view>
				</view>


			</view>
			<!-- 审批历史 -->

			<view class="task-progress">
				<view class="approval-history" @click="goToApprovalHistory">
					<text class="history-text">审批历史</text>
					<text class="arrow">›</text>
				</view>
			</view>

			<!-- 本月任务进度 -->
			<view class="task-progress">
				<text class="progress-title">本月任务进度</text>

				<!-- 合伙人统计 -->
				<view class="progress-item">
					<text class="progress-label">合伙人(人)</text>
					<view class="progress-bar">
						<view class="progress-bg">
							<view class="progress-fill partner-fill" :style="{width: partnerProgress + '%'}"></view>
						</view>
						<text class="progress-number">999</text>
					</view>
					<view class="progress-scale">
						<text class="scale-item">0</text>
						<text class="scale-item">铜</text>
						<text class="scale-item">银</text>
						<text class="scale-item">金</text>
						<text class="scale-item">50</text>
						<text class="scale-item">200</text>
						<text class="scale-item">500</text>
					</view>
				</view>

				<!-- 运营区会员统计 -->
				<view class="progress-item">
					<text class="progress-label">运营区会员(人)</text>
					<view class="progress-bar">
						<view class="progress-bg">
							<view class="progress-fill member-fill" :style="{width: memberProgress + '%'}"></view>
						</view>
						<text class="progress-number">8</text>
					</view>
					<view class="progress-scale">
						<text class="scale-item">0</text>
						<text class="scale-item">铜</text>
						<text class="scale-item">银</text>
						<text class="scale-item">金</text>
						<text class="scale-item">100</text>
						<text class="scale-item">200</text>
						<text class="scale-item">500</text>
					</view>
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	import api from '@/api/index.js'
	import {
		inject
	} from 'vue'
	export default {
		data() {
			return {
				baseUrl: inject('$baseUrl'),
				serverAddress: inject('$serverAddress', ''), // 提供默认值
				activeTab: 0, // 当前激活的标签页，0-团队收益，1-云主办公，2-市运营办公
				autoApproval: true, // 自动审批开关
				partnerProgress: 80, // 合伙人进度百分比
				memberProgress: 15 ,// 运营区会员进度百分比
				teamRevenueData:{},
				
			}
		},
		onLoad() {
			this.loadTeamProfit()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			switchTab(index) {
				this.activeTab = index

				// 根据不同标签页执行不同逻辑
				switch (index) {
					case 0:
						// 团队收益页面 - 当前页面内容
						console.log('切换到团队收益')
						break
					case 1:
						// 云主办公页面 - 预留方法
						this.loadCloudOfficeData()
						break
					case 2:
						// 市运营办公页面 - 预留方法
						this.loadCityOperationData()
						break
				}
			},
			loadCloudOfficeData() {
				// 云主办公数据加载方法 - 预留
				console.log('加载云主办公数据')
				uni.showToast({
					title: '云主办公功能开发中',
					icon: 'none'
				})
			},
			loadCityOperationData() {
				// 市运营办公数据加载方法
				console.log('加载市运营办公数据')
			},
			
			goToTuandui(id){
				uni.navigateTo({
					url: '/pages/my/team/contribution_list?roleId='+id
				})
			},
			
			// 市运营办公页面相关方法
			goToTaskHistory() {
				uni.navigateTo({
					url: '/pages/my/task-history/index'
				})
			},
			goToGrowthPlan() {
				uni.navigateTo({
					url: '/pages/my/growth-plan/index'
				})
			},
			goToMerchantManage() {
				uni.navigateTo({
					url: '/pages/my/merchant-manage/index'
				})
			},
			goToMonthlyStats() {
				uni.navigateTo({
					url: '/pages/my/monthly-stats/index'
				})
			},
			toggleAutoApproval() {
				this.autoApproval = !this.autoApproval
				uni.showToast({
					title: this.autoApproval ? '已开启自动审批' : '已关闭自动审批',
					icon: 'none'
				})
			},
			goToApprovalHistory() {
				uni.navigateTo({
					url: '/pages/my/approval-history/index'
				})
			},
			// 团队收益
			async loadTeamProfit() {
				try {
					// const token = uni.getStorageSync('token')
					// if (!token) return
					
					const result = await api.teamApi.getTeamProfit({
						
					})
					if (result.r === 0) {
						// this.cartCount = result.data.count || 0
						this.teamRevenueData= result.data
						console.log('==========',this.teamRevenueData)
					}
				} catch (error) {
					console.error('获取商品规格:', error)
				}
			},
			// 市运营办公
			async loadAgentWork() {
				try {
					// const token = uni.getStorageSync('token')
					// if (!token) return
					
					const result = await api.teamApi.getAgentWork({
						
					})
					if (result.r === 0) {
						// this.cartCount = result.data.count || 0
						this.goodsInfo.specs= result.data.lists || []
					}
				} catch (error) {
					console.error('获取商品规格:', error)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.team-page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		position: relative;

		.back-btn {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.back-icon {
				color: white;
				font-size: 40rpx;
				font-weight: bold;
			}
		}

		.title {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			color: white;
			font-size: 36rpx;
			font-weight: 500;
		}
	}

	.tabs {
		background: white;
		display: flex;
		height: 88rpx;

		.tab-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			&.active {
				.tab-text {
					color: #333;
					font-weight: 500;
				}

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 4rpx;
					background-color: #ff6b6b;
				}
			}

			.tab-text {
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	.user-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 60rpx 40rpx;
		background: white;
		margin-bottom: 20rpx;

		.user-avatar,
		.team-avatar {
			display: flex;
			flex-direction: column;
			align-items: center;

			.avatar-img,
			.team-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}

		.center-avatar {
			display: flex;
			flex-direction: column;
			align-items: center;

			.main-avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background: white;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;

				.main-avatar-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}

			.user-id {
				font-size: 24rpx;
				color: #999;
			}
		}

		.team-text {
			font-size: 24rpx;
			color: #666;
			margin-top: 10rpx;
		}
	}

	.card-item {
		background: white;
		margin: 0 30rpx 20rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		position: relative;

		.card-left {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.icon-wrapper {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;

				.icon {
					font-size: 32rpx;
					width: 60rpx;
					height: 60rpx;
				}
			}

			.member-icon {
				background-color: #ffd700;
			}

			.partner-icon {
				background-color: #8a7fff;
			}

			.indirect-icon {
				background-color: #4fc3f7;
			}

			.operation-icon {
				background-color: #ff7043;
			}

			.card-title {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
			}
		}

		.card-right {
			position: absolute;
			right: 30rpx;
			top: 30rpx;

			.arrow {
				font-size: 40rpx;
				color: #ccc;
			}
		}

		.card-stats {
			display: flex;
			align-items: center;

			.stat-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				.stat-number {
					font-size: 32rpx;
					color: #ff6b6b;
					font-weight: 500;
					margin-bottom: 10rpx;
				}

				.stat-label {
					font-size: 24rpx;
					color: #999;
				}
			}

			.divider {
				width: 2rpx;
				height: 60rpx;
				background-color: #eee;
				margin: 0 40rpx;
			}
		}
	}

	.operation-card {
		.card-stats {
			// display: none;
		}
	}

	// 市运营办公页面样式
	.invite-banner {
		background: linear-gradient(135deg, #ff6b35, #ff8e53);
		margin: 20rpx 30rpx;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		overflow: hidden;

		.banner-content {
			flex: 1;

			.banner-text {
				margin-bottom: 20rpx;

				.main-text {
					color: white;
					font-size: 36rpx;
					font-weight: bold;
					display: block;
					margin-bottom: 8rpx;
				}

				.sub-text {
					color: rgba(255, 255, 255, 0.9);
					font-size: 28rpx;
				}
			}

			.invite-btn {
				background: #ffd700;
				border-radius: 50rpx;
				padding: 16rpx 32rpx;
				display: inline-block;

				.btn-text {
					color: #333;
					font-size: 26rpx;
					font-weight: 500;
				}
			}
		}

		.banner-icon {
			font-size: 80rpx;
			opacity: 0.8;
		}
	}

	.function-icons {
		background: white;
		margin: 20rpx 30rpx;
		border-radius: 16rpx;
		padding: 40rpx 20rpx;
		display: flex;
		justify-content: space-around;

		.icon-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;

			.icon-wrapper {
				width: 80rpx;
				height: 80rpx;
				background: #f8f9fa;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 16rpx;

				.icon {
					font-size: 36rpx;
					width: 80rpx;
					height: 80rpx;
				}
			}

			.icon-label {
				font-size: 24rpx;
				color: #666;
				text-align: center;
			}
		}
	}

	.office-mode {
		background: white;
		margin: 20rpx 30rpx;
		border-radius: 16rpx;
		padding: 30rpx;

		.mode-header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.mode-title {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
			}

			.mode-switch {
				display: flex;
				align-items: center;

				.switch-label {
					font-size: 28rpx;
					color: #666;
					margin-right: 20rpx;
				}

				.switch-btn {
					width: 80rpx;
					height: 44rpx;
					background: #ddd;
					border-radius: 22rpx;
					position: relative;
					transition: all 0.3s;

					&.active {
						background: #ff6b6b;

						.switch-dot {
							transform: translateX(36rpx);
						}
					}

					.switch-dot {
						width: 36rpx;
						height: 36rpx;
						background: white;
						border-radius: 50%;
						position: absolute;
						top: 4rpx;
						left: 4rpx;
						transition: all 0.3s;
						box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
					}
				}
			}
		}

		
	}
	.approval-history {
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		.history-text {
			font-size: 28rpx;
			color: #333;
		}
	
		.arrow {
			font-size: 32rpx;
			color: #ccc;
		}
	}

	.task-progress {
		background: white;
		margin: 20rpx 30rpx;
		border-radius: 16rpx;
		padding: 30rpx;

		.progress-title {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
			margin-bottom: 40rpx;
		}

		.progress-item {
			margin-bottom: 50rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.progress-label {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
				display: block;
			}

			.progress-bar {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.progress-bg {
					flex: 1;
					height: 16rpx;
					background: #f0f0f0;
					border-radius: 8rpx;
					position: relative;
					margin-right: 20rpx;

					.progress-fill {
						height: 100%;
						border-radius: 8rpx;
						transition: width 0.3s;

						&.partner-fill {
							background: #4285f4;
						}

						&.member-fill {
							background: #ff7043;
						}
					}
				}

				.progress-number {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					min-width: 80rpx;
					text-align: right;
				}
			}

			.progress-scale {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.scale-item {
					font-size: 20rpx;
					color: #999;
					text-align: center;
					flex: 1;

					&:first-child,
					&:last-child {
						flex: 0;
					}
				}
			}
		}
	}
</style>